<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>“智慧通”教学信息化管理系统————雷达装备原理与运用</title>
    <script src="lib/echarts/echarts.js"></script>
    <script src="lib/echarts/echarts-wordcloud.min.js"></script>
    <script src="js/banjiqingkuang.js"></script>
    <script src="js/knowledge-graph.js"></script>
    <script src="js/echart-clock.js"></script>
    <script src="js/scoretable.js"></script>
    <script src="js/worldcloud.js"></script>
    <script src="js/rank.js"></script>
    <script src="js/radartable.js"></script>
    <script src="js/upright.js"></script>
    <script src="js/improvement.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-item status-1">
                <h2 class="glow-text" style="font-size: 1.5em;">“智慧通”教学信息化管理系统</h2>
                <p class="glow-text" style="font-size: 1.1em;">雷达装备原理与运用</p>
            </div>
            <div class="status-item status-2">
                <div class="sub-status">
                    <div class="sub-item">
                        <div class="sub-value" id="overviewBtn" onclick="handleMenuClick('overview')">个人情况总览</div>
                    </div>
                    <div class="sub-item">
                        <div class="sub-value" id="predictionBtn" onclick="handleMenuClick('prediction')">个人预判成绩</div>
                    </div>
                    <div class="sub-item">
                        <div class="sub-value" id="improvementBtn" onclick="handleMenuClick('improvement')">补差增分情况</div>
                    </div>
                    <div class="sub-item">
                        <div class="sub-value" id="evaluationBtn" onclick="handleMenuClick('evaluation')">课程意见建议</div>
                    </div>
                </div>
            </div>
            <div class="status-item status-3">
                <div class="status3-left">
                    <h2 class="glow-text" style="text-align: center;">预警技术与指挥220101期班</h2>
                </div>
                <div class="status3-right">
                    <div class="status-progress">
                        <div id="realTimeDate" class="date-container"></div>
                        <div id="realTimeClock" class="glow-text"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <div class="top-section">
                    <div class="left-top">
                        <div class="sub-section">
                            <h2>班级情况</h2>
                            <div class="gender-section">
                                <div class="student-info-card">
                                    <div class="student-avatar">
                                        <img src="picture/1.jpg" alt="学生头像">
                                    </div>
                                    <div class="student-details">
                                        <div class="detail-item">
                                            <i class="fas fa-user"></i>
                                            <span>姓名：张伟豪</span>
                                        </div>
                                        <div class="detail-item">
                                            <i class="fas fa-id-card"></i>
                                            <span>学号：20220001</span>
                                        </div>
                                        <div class="detail-item">
                                            <i class="fas fa-graduation-cap"></i>
                                            <span>专业：预警技术与指挥</span>
                                        </div>
                                        <div class="detail-item">
                                            <i class="fas fa-users"></i>
                                            <span>期班：预警220101期</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-section">
                            <h2>课程难易情况</h2>
                            <div class="chart-container" id="practiceChart"></div>
                        </div>
                    </div>
                    <div class="right-top">
                        <h2>课程知识图谱</h2>
                        <div class="chart-container-knowledgemap" id="knowledgemap"></div>
                    </div>
                </div>
                <div class="bottom-section">
                    <h2>班级成绩情况</h2>
                    <div class="chart-container" id="progressChart"></div>
                </div>
            </div>

            <!-- 右侧面板 -->
            <div class="right-panel">
                <div class="right-block">
                    <h2>课程总进度</h2>
                    <div class="chart-container" id="scoreChart"></div>
                </div>
                <div class="right-block">
                    <h2>课程词云图</h2>
                    <div class="chart-container" id="wordCloudChart"></div>
                </div>
                <div class="right-block">
                    <h2>学习之星</h2>
                    <div class="chart-container" id="knowledgeChart">
                        <!-- 三个排行榜入口 -->
                        <div class="rank-card">
                            <h3><i class="fas fa-medal gold-medal"></i> 雷达操纵师</h3>
                            <div class="champion">张伟豪</div>
                        </div>
                        <div class="rank-card">
                            <h3><i class="fas fa-medal gold-medal"></i> 精英指挥员</h3>
                            <div class="champion">陈浩然</div>
                        </div>
                        <div class="rank-card">
                            <h3><i class="fas fa-medal gold-medal"></i> 进步之星</h3>
                            <div class="champion">李明哲</div>
                        </div>
                        
                        <!-- 弹出模态框 -->
                        <div id="rankModal" class="modal">
                            <div class="modal-content">
                                <span class="close">&times;</span>
                                <div class="rank-columns">
                                    <!-- 三列将通过JS动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="progressDetailModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal-top-section">
                <div class="pie-chart-container">
                    <div id="pieChart1" class="chart-container"></div>
                </div>
                <div class="pie-chart-container">
                    <div id="pieChart2" class="chart-container"></div>
                </div>
                <div class="pie-chart-container">
                    <div id="pieChart3" class="chart-container"></div>
                </div>
                <div class="pie-chart-container">
                    <div id="pieChart4" class="chart-container"></div>
                </div>
            </div>
            <div class="modal-middle-section">
                <div class="bar-chart-container">
                    <div id="barChart1" class="chart-container"></div>
                </div>
                <div class="bar-chart-container">
                    <div id="barChart2" class="chart-container"></div>
                </div>
                <div class="bar-chart-container">
                    <div id="barChart3" class="chart-container"></div>
                </div>
                <div class="radar-chart-container">
                    <div id="radarChart" class="chart-container"></div>
                </div>
            </div>
            <div class="modal-bottom-section">
                <div id="detailProgressChart" class="chart-container"></div>
            </div>
        </div>
    </div>


    <script>
        function handleMenuClick(type) {
            // 移除所有按钮的激活状态
            document.querySelectorAll('.sub-value').forEach(el => {
                el.classList.remove('active');
            });
            
            // 为当前点击的按钮添加激活状态
            switch(type) {
                case 'overview':
                    document.getElementById('overviewBtn').classList.add('active');
                    // 显示个人情况总览内容
                    break;
                case 'prediction':
                    document.getElementById('predictionBtn').classList.add('active');
                    // 显示个人预判成绩内容
                    break;
                case 'improvement':
                    document.getElementById('improvementBtn').classList.add('active');
                    showScoreImprovement(); // 显示增分补差图表
                    break;
                case 'evaluation':
                    document.getElementById('evaluationBtn').classList.add('active');
                    window.open('kaoshizongjie.html', '_blank');
                    break;
            }
        }

        // 页面加载时默认激活"个人情况总览"按钮
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('overviewBtn').classList.add('active');
        });
    </script>
</body>
</html>